<template>
    <l-layout class="l-tab-page">
        <l-select-panel
            v-model="value"
            ref="selectPanel"
            valueKey="f_UserId"
            model="client"
            :multiple="multiple"
            :columns="columns"
            :loadSelectTable="loadSelectTable"
            :selectedData.sync="selectedData"

            @change="handleChange"

            style="padding:8px;padding-left:0;"
        >
        </l-select-panel>
    </l-layout>
</template>
<script>
export default {
    name:'l-user-select-panel',
    props:{
        multiple:{
            type:Boolean,
            default:true
        }
    },
    data(){
        return {
            value:'',
            selectedData:[],
            columns: [
                {label:'姓名',prop:'f_RealName',minWidth:'110'},
                {label:'账号',prop:'f_Account',width:'110'}
            ]
        };
    },
    computed:{
    },
    mounted () {
        this.tableLoadData()
    },
    methods:{
        tableLoadData(){
            this.$refs.selectPanel.init();
        },
        async loadSelectTable(postData){
            postData.sidx = 'F_CreateDate DESC'
            const data =await this.lr_getUserPage(postData)
            return data
        },
        resetForm(){
            this.value = ''
            this.$refs.selectPanel.reset()
            this.tableLoadData()
        },
        getForm(){
            return this.$deepClone(this.selectedData).map(t=>{ return {...t,name:`${t.f_RealName}`} });
        },
        handleChange(value){
            if(value){
                this.$emit('change',this.selectedData[0])
            }
            else{
                this.$emit('change',null)
            }
        }
    }
}
</script>